import React, {useEffect, useMemo, useState} from "react";
import {crvisdelete, deletecrvate, getCravte, getMajeJson, getMajeur, isMajeurdelete} from "../../../../api/api.js";
import College_EForm from "../CollegeTable/compent/College_EForm.jsx";
import {Button, Cascader, Dropdown, List, Modal, Table, Tag, Toast} from "@douyinfe/semi-ui";
import Majeur_AForm from "./compent/Majeur_AForm.jsx";
import {IconDelete, IconSearchStroked, IconSemiLogo, IconUndo} from "@douyinfe/semi-icons";
import Majeur_EForm from "./compent/Majeur_EForm.jsx";
import {School} from "@icon-park/react";

function MajeurTable() {
    const [data,setdata] = useState()
    const [treeData,settreeData] = useState()
    const [selectedValues, setSelectedValues] = useState("请选择学院/系部/专业");
    const [beifen,setbkdata] = useState(null)
    const [visible, setVisible] = useState(false);
    const [visible2, setVisible2] = useState(false);
    const [row,setrow] = useState(null)
    useEffect(()=>{
        getlist();
        getMaJson()
    },[])
    async function getlist(){
        const res = await getMajeur()
        res.data.data.forEach(v=>{
            v.key = v.mid
        })
        setdata(res.data.data)
        setbkdata(res.data.data)
    }
    async function getMaJson(){
        const res = await getMajeJson()
        settreeData(res.data.data)
    }
    function cool(i) {
    }
    const columns = [
        {
            title: '专业编号',
            dataIndex: 'mid',
        },
        {
            title: '专业名称',
            dataIndex: 'majeurname',
        },
        {
            title: '系部名称',
            dataIndex: 'rname',
        },
        {
            title: '学院名称',
            dataIndex: 'cname',
        },
        {
            title: '操作',
            dataIndex: 'operate',
            render: (text, record, index) => {
                return (
                    <div>
                        <Majeur_EForm mess={record}></Majeur_EForm>
                    </div>
                );
            },

        },
    ];
    const rowSelection = useMemo(
        () => ({
            onSelect: (record, selected) => {
                if (selected) {
                    setrow(record.mid);
                } else {
                    setrow(null);
                }
            },
        }),
        []
    );
    const handleOk2 = () => {

        setVisible2(false);
    };
    const handleCancel2 = () => {
        setVisible2(false);
    };
    const handleAfterClose2 = () => {
    };

    const pagination = useMemo(
        () => ({
            pageSize: 8,
        }),
        []
    );
    const Search = value => {
        const college = value[0]; // 学院
        const department = value[1]; // 系
        const majeur = value[2]//专业
        const res = beifen.filter(v => {
            return v.cname == college&&v.rname == department&&v.majeurname == majeur
        });
        setdata(res)
        setSelectedValues(value);
    }
    function getbk() {
        setdata(beifen)
        setSelectedValues("请选择学院/系部/专业");
    }
    async function deleteColl() {
        let form = new FormData()
        form.append("id",row)
        const res = await deletecrvate(form);
        if (res.data.code==200){
            Toast.success('专业删除成功')
        }else {
            Toast.success('专业删除失败')
        }
    }
    const handleOk = () => {
        setVisible(false);
        deleteColl()
    };
    const handleCancel = () => {
        setVisible(false);
    };
    const data3 = [
        {
            icon: <IconSemiLogo style={{ fontSize: 48 }} />,
            title: '删除系部后可能发生无法挽回的后果',
            content: '删除系部后无法撤回，请慎重删除',
        }
    ];
    const btnStyle = {
        width: 240,
        margin: '4px 50px',
    };
    const footer = (
        <div style={{ textAlign: 'center' }}>
            <Button type="primary" theme="solid" onClick={handleOk} style={btnStyle}>
                确认
            </Button>
            <Button type="primary" theme="borderless" onClick={handleCancel} style={btnStyle}>
                取消
            </Button>
        </div>
    );
    async function isdelete(){
        let form = new FormData()
        form.append("id",row)
        const res = await isMajeurdelete(form)
        console.log(res.data.data)
        if (res.data.data===false){
            setVisible2(true)
        }else {
            setVisible(true)
        }
    }

    return (
        <>
            <h2><School theme="outline" size="24" fill="#4a90e2"/> 专业管理</h2>
            <Cascader
                onChange={Search}
                value={selectedValues}
                style={{ width: 260,marginRight:'15px' }}
                treeData={treeData}
                placeholder="请选择学院/系部/专业"
            />
            <Button onClick={()=>{getbk()}} icon={<IconUndo />} theme="solid" style={{ marginRight: 5,backgroundColor:'rgba(var(--semi-red-4), 1)' }}>重置</Button>
            <Majeur_AForm></Majeur_AForm>
            <Button onClick={()=>{isdelete()}} icon={<IconDelete />} theme='solid' type='warning' style={{ marginLeft: '10px' }}>删除专业</Button>
            <Table style={{marginTop:'15px'}} bordered={true} columns={columns} dataSource={data} rowSelection={rowSelection} pagination={pagination} />
            <Modal
                title="警告"
                visible={visible2}
                onOk={handleOk2}
                afterClose={handleAfterClose2} //>=1.16.0
                onCancel={handleCancel2}
                closeOnEsc={true}
            >
                <h4>请先删除和系部有关的专业、班级！</h4>
            </Modal>
            <Modal
                header={null}
                visible={visible}
                onOk={handleOk}
                onCancel={handleCancel}
                footer={footer}
            >
                <h3 style={{ textAlign: 'center', fontSize: 24, margin: 40 }}>删除警告</h3>
                <List
                    dataSource={data3}
                    split={false}
                    renderItem={item => (
                        <List.Item
                            header={item.icon}
                            main={
                                <div>
                                    <h6 style={{ margin: 0, fontSize: 16 }}>{item.title}</h6>
                                    <p style={{ marginTop: 4, color: 'var(--semi-color-text-1)' }}>
                                        {item.content}
                                    </p>
                                </div>
                            }
                        />
                    )}
                />
            </Modal>
        </>
    );
}
export default MajeurTable